<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet"
          type="text/css"/>

    <script src="../../jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../../jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"
            type="text/javascript"></script>
    <script src="../../jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"
            type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //以下日历插件在FF中存在兼容问题，在IE浏览器中可以正常使用。
            /*
            $("#startTime").datetimepicker({
                minView: "month",
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });

            $("#endTime").datetimepicker({
                minView: "month",
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });
            */

            //定制字段
            $("#definedColumns > li").click(function (e) {
                //防止下拉菜单消失
                e.stopPropagation();
            });

        });

    </script>
</head>
<body>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>任务列表</h3>
        </div>
    </div>
</div>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <select class="form-control">
                            <option></option>
                            <option>zhangsan</option>
                            <option>lisi</option>
                            <option>wangwu</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">主题</div>
                        <input class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">到期日期</div>
                        <input class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">联系人</div>
                        <input class="form-control" type="text">
                    </div>
                </div>

                <br>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">状态</div>
                        <select class="form-control">
                            <option></option>
                            <option>未启动</option>
                            <option>推迟</option>
                            <option>进行中</option>
                            <option>完成</option>
                            <option>等待某人</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">优先级</div>
                        <select class="form-control">
                            <option></option>
                            <option>高</option>
                            <option>最高</option>
                            <option>低</option>
                            <option>最低</option>
                            <option>常规</option>
                        </select>
                    </div>
                </div>

                <button class="btn btn-default" type="submit">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button class="btn btn-primary" onclick="window.location.href='saveTask.html';" type="button"><span
                        class="glyphicon glyphicon-plus"></span> 任务
                </button>
                <button class="btn btn-default" onclick="alert('可以自行实现对通话的管理');" type="button"><span
                        class="glyphicon glyphicon-plus"></span> 通话
                </button>
                <button class="btn btn-default" onclick="window.location.href='editTask.html';" type="button"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>

        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox"/></td>
                    <td>主题</td>
                    <td>到期日期</td>
                    <td>联系人</td>
                    <td>状态</td>
                    <td>优先级</td>
                    <td>所有者</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td><a onclick="window.location.href='detail.html';"
                           style="text-decoration: none; cursor: pointer;">拜访客户</a></td>
                    <td>2017-07-09</td>
                    <td>李四先生</td>
                    <td>未启动</td>
                    <td>高</td>
                    <td>zhangsan</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td><a onclick="window.location.href='detail.html';"
                           style="text-decoration: none; cursor: pointer;">拜访客户</a></td>
                    <td>2017-07-09</td>
                    <td>李四先生</td>
                    <td>未启动</td>
                    <td>高</td>
                    <td>zhangsan</td>
                </tr>
                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <div>
                <button class="btn btn-default" style="cursor: default;" type="button">共<b>50</b>条记录</button>
            </div>
            <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
                <button class="btn btn-default" style="cursor: default;" type="button">显示</button>
                <div class="btn-group">
                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
                        10
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">20</a></li>
                        <li><a href="#">30</a></li>
                    </ul>
                </div>
                <button class="btn btn-default" style="cursor: default;" type="button">条/页</button>
            </div>
            <div style="position: relative;top: -88px; left: 285px;">
                <nav>
                    <ul class="pagination">
                        <li class="disabled"><a href="#">首页</a></li>
                        <li class="disabled"><a href="#">上一页</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">下一页</a></li>
                        <li class="disabled"><a href="#">末页</a></li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>

</div>
</body>
</html>